<template>
<div>
  <div>
    <el-upload
      style="display:none"
      :action="uploadURL + '/tool/Upload/UploadImages'"
      :show-file-list="false"
      :on-success="drugAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      accept=".jpg, .jpeg, .png, .JPG, .JPEG, .bmp"
      :on-error="handleAvatarError"
      id="uploadImg"
      ref="uploadImg"
    >
    </el-upload>
    <!--          这里是结合elemen UI进行图片上传，保存图片地址至服务器，-->
    <!--          而不是将图片流存入服务器，节省空间-->
    <quill-editor
      v-model="changeHosform.details"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

export default {
  name: "Editor",
  data(){
    return{
      uploadURL: "",
      changeHosform: {
        details: ""
      },
    }
  },
  editorOption: {
    placeholder: "请在这里输入", //默认显示文字
    modules: {
      toolbar: {
        container: [ //头部组件使用工具
          [{header: 1}], // 标题，键值对的形式；1、2表示字体大小
          ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
          ["blockquote"], //引用，代码块
          [{list: "ordered"}, {list: "bullet"}], //列表
          [{direction: "rtl"}], // 文本方向
          [{size: ["small", "large", "huge"]}], // 字体大小
          [{header: [1, 2, 3, 4, 5, 6]}], //几级标题
          [{align: []}], //对齐方式
          ["image"] //上传图片、上传视频
        ],
        handlers: {
          image: function (value) {
            if (value) {
              // 调用iview图片上传，改为element图片上传方法
              document.querySelector("#uploadImg .el-upload").click();
            } else {
              this.quill.format("image", false);
            }
          }
        }
      }
    }
  },
  components: { quillEditor },
  methods:{
//图片上传成功之后的回调
    handleAvatarSuccess(res, file) {
      let resp = res;
      console.log(resp);
      if (resp.code === 200) {
        this.changeHosform.imageUrl = resp.data[0].filePath;
        console.log(this.changeHosform);
      } else {
        this.$message.error(resp.message);
      }
    },
    //富文本框图片上传成功回调
    drugAvatarSuccess(res, file) {
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, "image", res.data[0].filePath);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        // 提示信息，需引入Message
        this.$message.error("图片插入失败");
      }
    },
    //图片上传失败回调
    handleAvatarError(err, file, fileList) {
      // console.log(err, file, fileList);
      this.$message.error("图片上传失败，请重新选择!!!");
    },
    //判断是否是图片
    isImage(fileName) {
      if (typeof fileName !== "string") return;
      let name = fileName.toLowerCase();
      return (
        name.endsWith(".png") ||
        name.endsWith(".jpeg") ||
        name.endsWith(".jpg") ||
        name.endsWith(".bmp") ||
        name.endsWith(".PNG") ||
        name.endsWith(".JPEG") ||
        name.endsWith(".JPG") ||
        name.endsWith(".BMP")
      );
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
  }

}
</script>

<style scoped>

</style>
